<template>
  <div class="swiper" :style="{ height: itemHeight + 'px' }">
    <div class="swiper-item" 
      :class="[currentIndex === index ? 'active' : '', swiperProps.swiperStyle === '10' ? 'normal' : 'zoom']" 
      :style="{width: itemWidth + 'px',transform: transform(index), 'padding': padding, left: left, zIndex: currentIndex === index ? 9 : 0}"
      v-for="(item, index) in dataList.swiperList" :key="'swiper-item-' + index">
      <img v-if="item.imgUrl" :src="item.imgUrl" alt="" :style="{'border-radius': swiperProps.radius + 'px'}">
      <div v-else class="picture-def height-160 flex flex-center">
        <img :src="pictureDefault" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import pictureDefault from '@/assets/images/picture.png'
export default {
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          loop: false, // 是否循环轮播
          autoPlay: false, // 是否自动轮播
          showDots: true, // 是否显示分页器
          interval: 3000 // 轮播间隔时间，默认3s
        }
      }
    },
    dataList: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      pictureDefault: pictureDefault,
      itemWidth: 369,
      currentIndex: 0,
      padding: '0px',
      left: '0px',
      swiperProps: {},
      itemHeight: 160,
      defaultPad: 10
    }
  },
  created() {
  },
  watch: {
    dataList: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.swiperProps = val.propMap
        if (val.propMap.swiperStyle === '10') {
          this.itemWidth = 369 - val.propMap.horizontalMargin
          this.left = `${val.propMap.horizontalMargin / 2}px`
          this.padding = `${val.propMap.verticalMargin}px ${val.propMap.horizontalMargin / 2}px`
        } else {
          this.left = `${val.propMap.horizontalMargin / 2 + this.defaultPad * 2 + 15}px`
          this.itemWidth = 369 - this.defaultPad * 4 - val.propMap.horizontalMargin - 30
          this.padding = `${val.propMap.verticalMargin}px ${val.propMap.horizontalMargin / 2 + 10}px`
        }
        this.$nextTick(() => {
          if (val.swiperList && val.swiperList.length > 0) {
            const img = new Image()
            img.src = val.swiperList[0].imgUrl
            img.onload = () => {
              this.itemHeight = img.height * this.itemWidth / img.width
            }
          }
        })
      }
    }
  },
  mounted() {
    this.swiperProps = this.dataList.propMap
    if (this.swiperProps.swiperStyle === '10') {
      this.itemWidth = 369 - this.swiperProps.horizontalMargin
      this.left = `${this.swiperProps.horizontalMargin / 2}px`
      this.padding = `${this.swiperProps.verticalMargin}px ${this.swiperProps.horizontalMargin / 2}px`
    } else {
      this.left = `${this.swiperProps.horizontalMargin / 2 + this.defaultPad * 2 + 15}px`
      this.itemWidth = 369 - this.defaultPad * 4 - this.swiperProps.horizontalMargin - 30
      this.padding = `${this.swiperProps.verticalMargin}px ${this.swiperProps.horizontalMargin / 2 + 10}px`
    }
    if (this.dataList.swiperList.length > 0) {
      const that = this
      this.$nextTick(() => {
        const img = new Image()
        img.src = that.dataList.swiperList[0].imgUrl
        img.onload = () => {
          that.itemHeight = img.height * that.itemWidth / img.width
        }
      })
    }
    this.handleMove()
  },
  methods: {
    handleMove() {
      setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > this.dataList.swiperList.length - 1) {
          this.currentIndex = 0
        }
      }, this.options.interval)
    },
    transform(index) {
      const length = this.dataList.swiperList.length // 轮播图数组的长度
      let transform = ''
      switch (length) {
        case 1:
          transform = `translateX(0%)`
          break
        case 2:
          if (index === length - 1 && this.currentIndex === 0) {
            transform = `translateX(100%)`
          } else if (index === 0 && this.currentIndex === length - 1) {
            transform = `translateX(100%)`
          }
          break
        default:
          if (index === length - 1 && this.currentIndex === 0) {
            transform = `translateX(-100%)`
          } else if (index === 0 && this.currentIndex === length - 1) {
            transform = `translateX(100%)`
          } else {
            transform = `translateX(${(index - this.currentIndex) * 100}%)`
          }
          break
      }
      return transform
    }
  }
}
</script>
<style lang="less" scoped>
.picture-def{
  background: #81d5f9;
  img{
    width: 90px!important;
    height: 90px!important;
  }
}
.swiper{
  width: 100%;
  // height: 160px;
  // box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  .swiper-item{
    flex-shrink: 0;
    height: 100%;
    position: absolute;
    transition: all .5s;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .zoom{
    height: 80%;
  }
  .active{
    height: 100%;
  }
}
</style>
